<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水波按钮</title>
    <style>
        ul {
          font-size: 0;
          padding: 0;
		  position: relative;
		  width: 480px;
		  margin: 40px auto;
		  user-select: none;
		}
		li {
		  display: inline-block;
		  width: 160px;
		  height: 60px;
		  background: #E95546;
		  font-size: 16px;
		  text-align: center;
		  line-height: 60px;
		  color: #fff;
		  text-transform: uppercase;
		  position: relative;
		  overflow: hidden;
		  cursor: pointer;
		}     
		.slider {
		  display: block;
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  height: 4px;
		  background: #4FC2E5;
		  transition: all 0.5s;
		}     
		.ripple {
		  width: 0;
		  height: 0;
		  border-radius: 50%;
		  background: rgba(255, 255, 255, 0.4);
		  -webkit-transform: scale(0);
		  -ms-transform: scale(0);
		  transform: scale(0);
		  position: absolute;
		  opacity: 1;
		}
		 
		.rippleEffect {
		  -webkit-animation: rippleDrop .4s linear;
		  animation: rippleDrop .4s linear;
		}
		 
		@-webkit-keyframes 
		  rippleDrop {  100% {
		   -webkit-transform: scale(2);
		   transform: scale(2);
		   opacity: 0;
		  }
		}
		@keyframes 
		  rippleDrop {  100% {
		   -webkit-transform: scale(2);
		   transform: scale(2);
		   opacity: 0;
		  }
		}    

    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script>
    	$(function(){
    		$("ul li").click(function(e) {
 
			  if ($(this).hasClass('slider')) {
			    return;
			  }
			 
			  var whatTab = $(this).index();
			 
			  var howFar = 160 * whatTab;
			 
			  $(".slider").css({
			    left: howFar + "px"
			  });
			 
			  $(".ripple").remove();
			 
			  var posX = $(this).offset().left,
			      posY = $(this).offset().top,
			      buttonWidth = $(this).width(),
			      buttonHeight = $(this).height();
			 
			  $(this).append("<span class='ripple'></span>");
			 
			  if (buttonWidth >= buttonHeight) {
			    buttonHeight = buttonWidth;
			  } else {
			    buttonWidth = buttonHeight;
			  }
			 
			  var x = e.pageX - posX - buttonWidth / 2;
			  var y = e.pageY - posY - buttonHeight / 2;
			 
			  $(".ripple").css({
			    width: buttonWidth,
			    height: buttonHeight,
			    top: y + 'px',
			    left: x + 'px'
			  }).addClass("rippleEffect");
			   
			}); 
    	});  
    </script>
</head>
<body>
	<ul>
	  <li>Tab One</li>
	  <li>Tab Two</li>
	  <li>Tab Three</li>
	  <li class="slider"></li>
	</ul> 
</body>
</html>